import React, { Component } from 'react'
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import "./Cate.less"
import { Image, List } from 'antd-mobile'
import {imgPre} from "../../request/http"
import Header from '../../components/Header/Header'
import { actions,getCates,getGoods,showGoods,getActivekey } from '../../store/modules/Cate';

class Cate extends Component {
    componentDidMount(){
        let {cate:{requestGoods,requestCates},} = this.props;
        requestCates();
        requestGoods();
    }
    render() {
        let{ cates,showGoods,goods,activeKey,cate:{changeActivekey}}=this.props;
        
        return (
            <div>
                <Header title="分类" back></Header>
                <div className="container">
                    <div className="side">
                            {cates?cates.map((item,index) => ( 
                                <span key={item.id} onClick={()=>changeActivekey(index)} className={index===activeKey?"active":''}>{item.catename}</span>
                            )):[]}
                    </div>
                    <div className="main">
                        {
                            <List>
                            {showGoods?showGoods.map(item => (
                                <List.Item
                                onClick={key=>{this.props.history.push("/Detail/"+item.id)}}
                                key={item.id}
                                prefix={
                                    <Image
                                    src={imgPre+item.img}
                                    fit='cover'
                                    width={80}
                                    height={80}
                                    />
                                }
                                description={item.description}
                                >
                                {item.goodsname}
                                <div>
                                    原价<del>{item.market_price}</del>
                                    &nbsp;&nbsp;&nbsp;
                                    <span>现价：{item.price}</span>
                                </div>
                                <button>加入购物车</button>
                                </List.Item>
                            )):''}
                        </List>
                        }
                    </div>
                </div>
            </div>
        )
    }
}

//取数据
const mapStateToProps = (state) => {
    return {
        cates:getCates(state),
        showGoods: showGoods(state),
        activeKey:getActivekey(state),
        goods:getGoods(state)
    };
}

//取方法
const mapDispatchToProps = (dispatch) =>{
    return {
        cate:bindActionCreators(actions,dispatch)
    };
}

export default connect(mapStateToProps,mapDispatchToProps)(Cate)